<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Inline Edit Examples</title>

        <link rel="stylesheet" type="text/css" href="../css/fluid.presentation.css" />
        <link rel="stylesheet" type="text/css" href="../css/fluid.states.css" />
        <link rel="stylesheet" type="text/css" href="../css/InlineEdit.css" />
        
        <script type="text/javascript" src="../js/jquery/jquery-1.2.6.js"></script>
        <script type="text/javascript" src="../js/jquery/jARIA.js"></script>
        <script type="text/javascript" src="../js/jquery/jquery.keyboard-a11y.js"></script>
        <script type="text/javascript" src="../js/jquery/jquery.tooltip.js"></script>
        <script type="text/javascript" src="../js/fluid/Fluid.js"></script>
        <script type="text/javascript" src="../js/fluid/InlineEdit.js"></script>        
        
        <script type="text/javascript">
            jQuery(document).ready(function () {
                /* A single editable piece of text within a single container */
                /* includes a custom tooltip that appears on hover after 500ms */
                var simpleEdit = fluid.inlineEdit("#simpleEdit", {
                    selectors : {
                        text: ".editableText"
                    },
                    useTooltip : true,
                    tooltipDelay : 500
                });
                
                /* Same as example 1, but with a customized edit field */
                var customEdit = fluid.inlineEdit("#customEdit", {
                    selectors : {
                        text: ".editableText",
                        editContainer: "#customEditorContainer",
                        edit: "#customizedEditField"
                    }
                });
                
                /* Example 3 - note the difference in the syntax */
                /* multiple inline edit requires each editable text object to be wrapped again inside another element */                
                var multiEdit = fluid.inlineEdits("#multipleEdit", {
                    selectors : {
                        text : ".editableText",
                        editables : "p"
                    }
                });
            });
        </script>

        
    </head>
    <body>
    
    <h1> Example 1. Simple Inline Edit</h1>
    <p> The words in <strong>bold</strong> are editable. </p>    
    <blockquote id="simpleEdit">
        The quick brown fox jumped <strong class="editableText">over the lazy dogs</strong> and then...
    </blockquote>

    
    <h1> Example 2. Customized edit field</h1>
    <p> The words in <strong>bold</strong> are editable. with a maximum of 35 characters allowed. </p>    
    <blockquote id="customEdit">    
        The quick brown fox jumped 
        <strong class="editableText">over the lazy dogs</strong>
        <span id="customEditorContainer">
            <input id="customizedEditField" type="text" maxlength="35" />
        </span>
        and then...
    </blockquote>
    

    <h1> Example 3. Multiple Inline Edits</h1>
    <p> The words in <strong>bold</strong> are editable.</p>    
    <blockquote id="multipleEdit">
        <p>The quick brown fox jumped <strong class="editableText">over the lazy dogs</strong> and then...</p>
        <p>The quick brown fox <strong class="editableText">over jumped  the lazy</strong> dogs and then...</p>
        <p>The quick <strong class="editableText">brown fox jumped over</strong> the lazy dogs and then...</p>
        <p>The quick brown fox jumped over the <strong class="editableText">lazy dogs</strong> and then...</p>
        <p>The over <strong class="editableText">quick</strong> brown fox jumped  the lazy dogs and then...</p>
    </blockquote>


    </body>
</html>